<template>
  <el-form-item prop="email" :rules="rules">
    <div class="phone_box" :class="['phone_box', getBorder]">
      <div class="ease_animation" :style="{ width: isShowAreaCode ? '90px' : '0px' }">
        <el-select v-model="phoneCode" slot="prepend" style="width: 90px">
          <el-option
            :label="item.paramValue"
            :value="item.id"
            v-for="(item, index) in phoneCodeList"
            :key="index"
          ></el-option>
        </el-select>
      </div>
      <el-input
        v-model="email"
        :placeholder="$t('patient.huanzhe28')"
        @blur="emailBlur"
        @focus="emailFocus"
        @input="emailChange"
      >
      </el-input>
    </div>
  </el-form-item>
</template>
  
<script>
import { isEmail, isMobile } from '@/utils/validate';
export default {
  name: 'BLZMasterIndex',

  data() {
    const validateEmail = (rule, value, callback) => {
      
      if (value === '') {
        this.phoneLegal = false;
        callback(new Error(this.$t('login.mima3')));
      } else {
        if (value.includes('@')) {
          // 是邮箱
          if (!isEmail(this.email)) {
            this.phoneLegal = false;
            callback(new Error(this.$t('login.mima13')));
          } else {
            this.phoneLegal = true;
            callback();
          }
        } else {
         
          if (!isMobile(this.email)) {
            this.phoneLegal = false;
            callback(new Error(this.$t('zhuce.zhuce18')));
          } else {
            this.phoneLegal = true;
            callback();
          }
        }
      }
    };
    return {
      email: this.value,
      // 手机号输入框是否点击过
      isClick: false,
      // 定义变量确定是否聚焦
      isFocus: false,
      // 手机号或者邮箱是否合法
      phoneLegal: true,
      // 定义区号是否出现
      isShowAreaCode: false,
      phoneCodeList: [],
      phoneCode: '85',
   

      rules: [
        {
          validator: validateEmail,
          trigger: 'blur',
        },
      ],
    };
  },
  props: {
    value: {
      type: String,
      required: true
    },
    // rules: {
    //   type: Array,
    //   required: true,
    // },
  },
  computed: {
    // 获取自定义输入框盒子的边框颜色
    getBorder: function () {
      let className = '';
      if (this.isClick) {
        if (this.isFocus) {
          if (this.phoneLegal) {
            className = 'curr_phone_box';
          } else {
            className = 'red_phone_box';
          }
        } else {
          if (this.phoneLegal) {
            className = 'curr_phone_box';
          } else {
            className = 'red_phone_box';
          }
        }
      }

      return className;
    },
  },
  created() {
    
    // 获取手机号区号数据
    this.getPhoneArea();
  },
  mounted() {},

  methods: {
    getPhoneArea() {
      this.$http
        .get('/sys/params/page?page=1&limit=9999&paramCode=phoneNumber&paramType=1')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.phoneCodeList = res.data.list;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    emailBlur(val) {
      this.isFocus = false;
      // if (val.target.value && localStorage.getItem('email') == val.target.value) {
      //   this.emailForm.password = Base64.decode(localStorage.getItem('password')); // base64解密
      // }
    },
    emailFocus() {
      this.isClick = true;
      this.isFocus = true;
    },
    emailChange() {
      if (this.email.length >= 4) {
        if (!this.email.includes('@')) {
          this.isShowAreaCode = true;
        }
      } else {
        this.isShowAreaCode = false;
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>

</style>
  